<template>
  <div class="login_container">
    <div class="login_box">
      <!--头像-->
      <div class="avatar_box">
        <img src="@/assets/img/g.jpg" />
      </div>
      <!--表单-->
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        label-width="0px"
        class="login_form"
      >
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item prop="verifyCode">
          <div class="verfiyCode_box">
            <el-input
              v-model="loginForm.verifyCode"
              prefix-icon="el-icon-mobile"
              class="verify_code"
            ></el-input>
            <img :src="captchaUrl" class="verify_img" @click="getCodeInfo" />
          </div>
        </el-form-item>
        <el-form-item class="login_btn">
          <el-button type="primary" @click="submitForm('loginForm')">立即登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <Vcode
        :show="isShowVCode"
        @success="success"
        @close="close"
        :canvasWidth="500"
        :canvasHeight="250"
      ></Vcode>
    </div>
  </div>
</template>
<script>
import Vcode from "vue-puzzle-vcode";
import { login, loginInfo } from "@/api/system/login.js";
import { getCode } from "@/api/system/vcode.js";
export default {
  name: "login",
  components: {
    Vcode,
  },
  created() {
    this.getCodeInfo();
  },
  mounted() {
    //重新登录防止回退之前页面
    localStorage.clear();
    history.pushState(null, null, document.URL);
    window.addEventListener(
      "popstate",
      function () {
        history.pushState(null, null, document.URL);
      },
      false
    );
  },
  data() {
    return {
      isShowVCode: false, //是否显示验证码
      captchaUrl: "",
      tokenStr: "",
      loginUser: "",
      loginForm: {
        username: "warren",
        password: "chenjianwen",
        verifyCode: "",
        verKey: "",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 16, message: "长度在 5到 10 个字符", trigger: "blur" },
        ],
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async getCodeInfo() {
      const { data: res } = await getCode();
      console.log(res);
      this.loginForm.verKey = res.key;
      this.captchaUrl = res.image;
      console.log(this.captchaUrl);
      console.log(this.loginForm.verKey);
    },
    // updateCaptcha(){
    //   this.captchaUrl = 'http://localhost:8081/auth/captcha?time=' + new Date().getTime()
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.success();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //滑动验证码通过
    async success() {
      const loading = this.$loading({
        lock: true,
        text: "loading",
        spinner: "el-icon-loading",
        background: "rgba(0,0,0,0.7)",
      });
      console.log(111);
      //登录返回token
      const res = await login(this.loginForm);
      console.log(res);
      if (res != null) {
        if (res.code === 200) {
          this.tokenStr = res.data.token.token;
          this.tokenHeader = res.data.token.tokenHead;
          // window.sessionStorage.setItem('tokenStr',this.tokenStr)
          localStorage.setItem("tokenStr", this.tokenStr);
          localStorage.setItem("tokenHead", this.tokenHeader);

          //获取用户信息
          //this.$router.push("/main");
          const resp = await loginInfo();
          console.log(resp);
          if (resp.code == 200) {
            this.loginUser = resp.data.user;
            this.$store.commit("setUserInfo", resp.data.user);
            //this.$session.set('loginUser', JSON.stringify(this.loginUser))
            this.$router.push("/main");
          } else {
            this.$message.error(resp.data.message);
            this.getCodeInfo();
            //this.updateCaptcha()
          }
        } else {
          this.isShowVcode = false;
          loading.close();
          //this.$message.error(res.message);
          //this.updateCaptcha()
        }
      }else{
        this.isShowVcode = false;
          loading.close();
      }

      loading.close();
    },
    close() {
      this.isShowVcode = false;
      //this.updateCaptcha()
    },
  },
};
</script>
<style lang="less" scoped>
.login_container {
  height: 100%;
  background-color: aquamarine;
}

.login_box {
  width: 450px;
  height: 380px;
  background-color: #ffffff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eeeeee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: -65px auto;
    background-color: #ffffff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eeeeee;
    }
  }

  .login_form {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;

    .login_btn {
      display: flex;
      justify-content: flex-end;
    }

    .verfiyCode_box {
      display: flex;
      .verify_code {
        width: 70%;
        justify-content: left;
      }

      .verify_img {
        width: 30%;
        height: 45px;
        justify-content: flex-end;
      }
    }
  }
}
</style>